<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions"  prefix="fn"%>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="pragram" content="no-cache"/>
    <meta http-equiv="cache-control" content="no-cache, must-revalidate"/>
    <meta http-equiv="expires" content="0"/>
    <meta name="renderer" content="webkit"/>
    <title>账号管理</title>

    <link rel="stylesheet" href="/assets/css/lib/bootstrap.min.css">
    <link rel="stylesheet" href="/assets/css/lib/pagination.css">

    <link rel="stylesheet" href="/assets/css/common.css">
    <link rel="stylesheet" href="/assets/css/account_manage.css">

</head>
<body>
<div  id="cms">
    <jsp:include page="title_bar.jsp"/>
    <jsp:include page="tab_bar.jsp"/>
    <div class="cms-content">
        <div class="current-place">
            <div class="place-title">当前位置:</div>
            <div class="place-val">首页/账号管理</div>
        </div>
        <div class="cms-container">
            <div class="pagination-box clearfix">
                <div class="pagination-unit pagination-unit-active">账号管理</div>
                <div class="pagination-unit">隶属组及权限管理</div>
                <div class="pagination-unit">公司部门管理</div>
            </div>
            <div class="slider-box">
                <div class="slider-container clearfix">
                    <div class="slider-unit">
                        <div class="table-box">
                            <table class="table table-bordered">
                                <thead>
                                <tr>
                                    <th>账号ID</th>
                                    <th>账号</th>
                                    <th>密码</th>
                                    <th>隶属组</th>
                                    <th>所有人姓名</th>
                                    <th>电话</th>
                                    <th>隶属部门</th>
                                    <th>职位</th>
                                    <th>账号有效性</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody id="list">
                                </tbody>
                                <script id="list_tmpl" type="text/html">
                                    <!for(k in result){
                                    var v=result[k];
                                    !>
                                    <tr>
                                        <td class="userid"><!=v.userid!></td>
                                        <td class="userName"><!=v.user_name!></td>
                                        <td class="userPw"><!=v.user_pw!></td>
                                        <td class="roleId"><!=v.role_name!></td>
                                        <td class="realName"><!=v.real_name!></td>
                                        <td class="userPhone"><!=v.user_phone!></td>
                                        <td class="groupId"><!=v.group_name!></td>
                                        <td class="position"><!=v.position!></td>
                                        <td class="isvalid"><!=v.isvalid==1?'正常':'冻结'!></td>
                                        <td>
                                             <!if(role==0){!>  <div class="account-edit" onclick="open_eidt_sysuser(this)" data-value="<!=JSON.stringify(v)!>">编辑</div> <!}!>
                                        </td>
                                    </tr>
                                    <!}!>
                                </script>

                            </table>
                            <div class="pagination-wrap clearfix">
                                <div class=" limit-add user-add"  name="roleMenu">新增</div>
                                <div id="Pagination" class="pagination"><!-- 这里显示分页--></div>
                            </div>
                        </div>
                    </div>
                    <div class="slider-unit">
                        <div class="table-box limit-manage">
                            <table class="table table-bordered" id="list2">

                            </table>

                            <script id="list2_tmpl" type="text/html">

                                <thead>
                                <tr>
                                    <th>隶属组</th>
                                <!for(k in result){
                                var v=result[k];

                                for(sv in v){
                                    for(ss in v[sv]){
                                !>
                                    <th><!=ss!></th>

                                <!}} break;}!>
                                    <th>操作</th>
                                </tr>
                                </thead>

                                <!for(k in result){!>
                                  <tr>
                                    <!  var v=result[k];
                                      for(sv in v){
                                       !>

                                      <td class="userid">
                                       <!=sv.split(",")[0]!>
                                      </td>
                                      <!
                                      for(ss in v[sv]){

                                        !>
                                      <td> <!=backState(v[sv][ss])!> </td>

                                       <!
                                      }

                                      !>

                                      <!}!>

                                      <td>
                                          <!if(role==0){!>   <div class="limit-edit" data-value="<!=sv.split(',')[1]!>" onclick="openEdit(this)" >编辑</div> <!}!>
                                      </td>

                                  </tr>
                                <!}!>
                            </script>

                            <div class="pagination-wrap clearfix">
                                <div class="limit-add role-add" name="roleMenu">新增</div>
                                <div id="Pagination1" class="pagination"><!-- 这里显示分页--></div>
                            </div>
                        </div>

                    </div>
                    <div class="slider-unit">
                        <div class="table-box department-manage">
                            <table class="table table-bordered">
                                <thead>
                                    <th>部门序号</th>
                                    <th>部门名称</th>
                                    <th>操作</th>
                                </thead>
                                <tbody id="list3">

                                </tbody>
                                <script id="list3_tmpl" type="text/html">

                                    <!for(k in result){
                                    var v=result[k];
                                    !>

                                    <tr>
                                        <td><!=v.userGroupId!></td>
                                        <td><!=v.groupName!></td>
                                        <td>
                                            <!if(role==0){!>  <div class="department-edit" data-value="<!=JSON.stringify(v)!>"  onclick="open_edit_group(this)">编辑</div><!}!>
                                        </td>
                                    </tr>

                                   <!}!>

                                </script>

                            </table>
                            <div class="pagination-wrap clearfix">
                                <div class="department-add" name="roleMenu">新增</div>
                                <div id="Pagination2" class="pagination"><!-- 这里显示分页--></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</div>
<!--账号管理编辑框开始-->
<div class="cms-modal-lg" id='edit-account'>
    <div class="cms-modal-dialog">
        <div class="cms-modal-title">编辑账号信息</div>


        <div class="cms-madal-content" id="edit_user">
        </div>




        <script id="edit_user_tmpl" type="text/html">
            <form id="edit_user_form">

                <input type="hidden" name="userid" value="<!=data.userid!>"/>

            <div class="state-unit">
                <div class="two-stage">
                    <div class="state-left not-edit">账号ID</div>
                    <div class="state-right account-id"><!=data.userid!></div>
                </div>
                <div class="two-stage">
                    <div class="state-left">账号</div>
                    <div class="state-right">
                        <input type="text" class="form-control" name="userName"  data-rule-required="true" maxlength="10" value="<!=data.user_name!>" />
                    </div>
                </div>
                <div class="two-stage">
                    <div class="state-left">密码</div>
                    <div class="state-right">
                        <input type="text" class="form-control"  name="userPw" data-rule-required="true" value="<!=data.user_pw!>" maxlength="20"/>
                    </div>
                </div>
            </div>
            <div class="state-unit">
                <div class="two-stage">
                    <div class="state-left">所有人姓名</div>
                    <div class="state-right">
                        <input type="text" class="form-control required" name="realName" value="<!=data.real_name!>" maxlength="10"/>
                    </div>
                </div>
                <div class="two-stage">
                    <div class="state-left">电话</div>
                    <div class="state-right">
                        <input type="text" class="form-control required digits" name="userPhone" value="<!=data.user_phone!>" />
                    </div>
                </div>
            </div>
            <div class="state-unit">
                <div class="two-stage">
                    <div class="state-left ">隶属组</div>
                    <div class="state-right account-id">
                        <select class="form-control required" name="roleId">

                            <c:forEach items="${userRoleList}" var="role">

                                <option value="${role.roleId}"   <!=${role.roleId}==data.role_id?'selected':''!> >${role.roleName}</option>

                            </c:forEach>

                        </select>
                    </div>
                </div>
                <div class="two-stage">
                    <div class="state-left">隶属部门</div>
                    <div class="state-right account-id">
                        <select class="form-control required" name="groupId">
                            <c:forEach items="${userGroupList}" var="group">
                                <option value="${group.userGroupId}" <!=${group.userGroupId}==data.group_id?'selected':''!> >${group.groupName}</option>
                            </c:forEach>
                        </select>
                    </div>
                </div>
            </div>

            <div class="state-unit" >

            <div class="two-stage">
                <div class="state-left">职位</div>
                <div class="state-right">
                    <input type="text" name="position" class="form-control required" value="<!=data.position!>"/>
                </div>
            </div>
            <div class="two-stage">
                <div class="state-left">账号有效性</div>
                <div class="state-right">
                    <select class="form-control required" name="isvalid">
                        <option value="1"  <!=data.isvalid==1?'selected':''!> >正常</option>
                        <option value="0"  <!=data.isvalid==0?'selected':''!> >冻结</option>
                    </select>
                </div>
            </div>

            </div>
            </form>

        </script>

        <div class="cms-modal-bottom">
            <button type="button" class="cms-confirm account-edit-confirm">保存</button>
            <button type="button" class="cms-cancel account-edit-cancel">取消</button>
        </div>
    </div>
</div>
<!--账号管理编辑框结束-->



<!--账号管理新增开始-->


<!--账号管理编辑框开始-->
<div class="cms-modal-lg" id='add-account'>
    <div class="cms-modal-dialog">
        <div class="cms-modal-title">新增账号信息</div>

        <form id="add_account_form">
        <div class="cms-madal-content">


                    <div class="state-unit">

                        <div class="two-stage">
                            <div class="state-left">账号</div>
                            <div class="state-right">
                                <input type="text" class="form-control" name="userName"  data-rule-required="true" maxlength="10"  />
                            </div>
                        </div>
                        <div class="two-stage">
                            <div class="state-left">密码</div>
                            <div class="state-right">
                                <input type="text" class="form-control"  name="userPw" data-rule-required="true" maxlength="20"/>
                            </div>
                        </div>
                    </div>
                    <div class="state-unit">
                        <div class="two-stage">
                            <div class="state-left">所有人姓名</div>
                            <div class="state-right">
                                <input type="text" class="form-control required" name="realName"  maxlength="10"/>
                            </div>
                        </div>
                        <div class="two-stage">
                            <div class="state-left">电话</div>
                            <div class="state-right">
                                <input type="text" class="form-control required digits" name="userPhone" />
                            </div>
                        </div>
                    </div>
                    <div class="state-unit">
                        <div class="two-stage">
                            <div class="state-left ">隶属组</div>
                            <div class="state-right account-id">
                                <select class="form-control required" name="roleId">

                                    <c:forEach items="${userRoleList}" var="role">

                                        <option value="${role.roleId}" >${role.roleName}</option>

                                    </c:forEach>

                                </select>
                            </div>
                        </div>
                        <div class="two-stage">
                            <div class="state-left">隶属部门</div>
                            <div class="state-right account-id">
                                <select class="form-control required" name="groupId">
                                    <c:forEach items="${userGroupList}" var="group">
                                        <option value="${group.userGroupId}"  >${group.groupName}</option>
                                    </c:forEach>
                                </select>
                            </div>
                        </div>
                    </div>

                    <div class="state-unit" >

                        <div class="two-stage">
                            <div class="state-left">职位</div>
                            <div class="state-right">
                                <input type="text" name="position" class="form-control required"/>
                            </div>
                        </div>
                        <div class="two-stage">
                            <div class="state-left">账号有效性</div>
                            <div class="state-right">
                                <select class="form-control required" name="isvalid">
                                    <option value="1"  >正常</option>
                                    <option value="0"  >冻结</option>
                                </select>
                            </div>
                        </div>

                    </div>


        </div>

        <div class="cms-modal-bottom">
            <button type="button" id="add_account" class="cms-confirm account-add-confirm">保存</button>
            <button type="button"  id="cancel_account" class="cms-cancel account-add-cancel">取消</button>
        </div>
        </form>
    </div>
</div>
<!--账号管理编辑框结束-->


<!--账号管理新增框结束-->





<!--隶属组及权限管理开始-->
<div class="cms-modal-lg" id='add-limit'>

    <div class="cms-modal-dialog">
        <div class="cms-modal-title">新增权限</div>


        <form id="add_limit_form">

        <div class="cms-madal-content" id="add_limit">



            <div class="two-stage">
                <div class="state-left">隶属组</div>
                <div class="state-right account-id">
                    <input type="text" class="form-control" name="" id="add_role_name"  data-rule-required="true" maxlength="10"  />
                </div>
            </div>
            <div class="limit-title">权限管理</div>
            <div class="limit-content">





                <c:forEach items="${menuList}" var="menu" varStatus="i" >



                    <c:if test="${i.index%2==0}">

                        <div class="limit-group">

                    </c:if>

                    <div   <c:if test="${i.index%2==0}"> class="limit-unit-left"  </c:if>  <c:if test="${i.index%2!=0}"> class="limit-unit-right"  </c:if> >
                        <div class="limit-left">${menu.menuName}</div>
                        <div class="limit-right">


                            <input type="checkbox" data-value="${menu.menuId}"  value="1" id="limit-clientadd${menu.menuId}"   ><label for="limit-clientadd${menu.menuId}">查看</label>
                            <input type="checkbox"  data-value="${menu.menuId}" value="0" id="limit-client-editadd${menu.menuId}"  ><label for="limit-client-editadd${menu.menuId}">编辑</label>


                        </div>
                    </div>

                    <c:if test="${(i.index%2==1&&i.index!=0)||fn:length(menuList)==i.index+1}">
                        </div>
                    </c:if>


                </c:forEach>


            </div>


        </div>

        </form>

        <div class="cms-modal-bottom">
            <button type="button" class="cms-confirm limit-add-confirm ">保存</button>
            <button type="button" class="cms-cancel limit-add-cancel">取消</button>
        </div>
    </div>


</div>





<!--隶属组及权限管理开始-->
<div class="cms-modal-lg" id='edit-limit'>

    <div class="cms-modal-dialog">
        <div class="cms-modal-title">修改权限</div>
        <div class="cms-madal-content" id="edit_limit">

        </div>
        <div class="cms-modal-bottom">
            <button type="button" class="cms-confirm limit-edit-confirm">保存</button>
            <button type="button" class="cms-cancel limit-edit-cancel">取消</button>
        </div>
    </div>


</div>


<script type="text/html" id="edit_limit_tmpl">


    <div class="two-stage">
        <div class="state-left">隶属组</div>
        <div class="state-right account-id">
            <select class="form-control" id="eidt_role_id">

                <c:forEach items="${userRoleList}" var="role">

                    <option value="${role.roleId}"  <!=${role.roleId}==data.roleId?'selected':''!>> ${role.roleName}</option>

                </c:forEach>
            </select>
        </div>
    </div>
    <div class="limit-title">权限管理</div>
    <div class="limit-content">


        <c:forEach items="${menuList}" var="menu" varStatus="i" >

            <c:if test="${i.index%2==0}">

                <div class="limit-group">

            </c:if>

            <div   <c:if test="${i.index%2==0}"> class="limit-unit-left"  </c:if>  <c:if test="${i.index%2!=0}"> class="limit-unit-right"  </c:if> >
                <div class="limit-left">${menu.menuName}</div>
                <div class="limit-right">

                   <!

                     var role=-1;

                     for(k in data.data){

                          var v=data.data[k];

                          if(v.menu_id==${menu.menuId}){

                                role=v.role;

                                break;
                           }

                    }

                    !>

                    <input type="checkbox" data-value="${menu.menuId}"  value="1" id="limit-client${menu.menuId}"   <!= role==1||role==0?'checked':''!> ><label for="limit-client${menu.menuId}">查看</label>
                    <input type="checkbox"  data-value="${menu.menuId}" value="0" id="limit-client-edit${menu.menuId}" <!=role==0?'checked':''!>  ><label for="limit-client-edit${menu.menuId}">编辑</label>


                </div>
            </div>

            <c:if test="${i.index%2==1&&i.index!=0}">
                </div>
            </c:if>


        </c:forEach>

    </div>

</script>


<!--隶属组及权限管理结束-->
<!--公司部门管理开始-->
<div class="cms-modal-ms" id="edit-department">
    <div class="cms-modal-dialog">
        <div class="cms-modal-title">编辑公司部门信息</div>
        <div class="cms-madal-content" id="edit_group">

        </div>
        <script id="edit_group_tmpl" type="text/html">

            <form id="edit_group_from">
            <input type="hidden" name="userGroupId" value="<!=data.userGroupId!>"/>
            <div class="state-unit">
                <div class="two-stage">
                    <div class="state-left not-edit">部门序号</div>
                    <div class="state-right account-id"><!=data.userGroupId!></div>
                </div>
                <div class="two-stage">
                    <div class="state-left">部门名称</div>
                    <div class="state-right">
                        <input type="text" class="form-control" name="groupName"  data-rule-required="true" maxlength="10" value="<!=data.groupName!>" />
                    </div>
                </div>
            </div>
            </form>

        </script>

        <div class="cms-modal-bottom">
            <button type="button" class="cms-confirm department-confirm">保存</button>
            <button type="button" class="cms-cancel department-cancel">取消</button>
        </div>
    </div>
</div>
<!--公司部门管理结束-->




<!--公司部门管理开始-->
<div class="cms-modal-ms" id="add-department">
    <div class="cms-modal-dialog">
        <div class="cms-modal-title">新增公司部门信息</div>
        <div class="cms-madal-content" id="add_group">

            <form id="add_group_from">

                <div class="state-unit">
                    <div class="two-stage">
                        <div class="state-left">部门名称</div>
                        <div class="state-right">
                            <input type="text" class="form-control" name="groupName"  data-rule-required="true" maxlength="10"  />
                        </div>
                    </div>
                </div>

            </form>

        </div>

        <div class="cms-modal-bottom">
            <button type="button" class="cms-confirm add-group-btn">保存</button>
            <button type="button" class="cms-cancel  cancel-group-btn">取消</button>
        </div>
    </div>
</div>
<!--公司部门管理结束-->

</body>
<script type="text/javascript" src="/assets/js/lib/jquery-1.12.3.js"></script>
<script type="text/javascript" src="/assets/js/lib/bootstrap.min.js"></script>
<script type="text/javascript" src="/assets/js/lib/modal.js"></script>
<script type="text/javascript" src="/assets/js/lib/cmsmodal.js"></script>

<script type="text/javascript" src="/assets/js/lib/distpicker.data.js"></script>
<script type="text/javascript" src="/assets/js/lib/distpicker.js"></script>
<script type="text/javascript" src="/assets/js/lib/jquery.pagination.js"></script>

<script type="text/javascript" src="/assets/js/lib/jquery.validate.js"></script>
<script type="text/javascript" src="/assets/js/lib/jquery.validate.messages_cn.js"></script>
<script type="text/javascript" src="/assets/js/lib/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="/assets/js/common.js"></script>
<script type="text/javascript" src="/assets/js/communal/template.js"></script>

<script type="text/javascript" src="/assets/js/account_manage.js"></script>
</html>